<template>
	<!-- 列表项 -->
	<view class="card" :style="`width: ${this.width}; height: ${this.height};`">
		<!-- 角标 -->
		<view class="card_hornicon">待核实</view>
		<view class="card_title">
			<slot name="title">
				{{this.title}}
			</slot>
		</view>
		<view class="card_body">
			<slot name="body">
				<u-row class="card_body_row" v-for="(item, index) in list" :key="index">
					<u-col class="card_body_row_label" span="3">{{ item.label }}</u-col>
					<u-col class="u-line-1" span="10">：{{ item.value }}</u-col>
				</u-row>
			</slot>
		</view>
		<view class="card_buttom">
			<slot name="buttom">
				<u-row>
					<u-col span="3" offset="5"><u-button @click="handle()" type="primary" shape="circle" text="处理"></u-button></u-col>
					<u-col span="3" offset="1">
						<u-button style="background-color: #dfeffe; color: #54a9fb;" type="primary" shape="circle"
							:hairline="true" text="详情"></u-button></u-col>
				</u-row>
			</slot>

		</view>
	</view>

</template>

<script>
	export default {
		props: {
			// 卡片宽
			width: {
				type: String,
				default: '80%',
			},
			// 卡片高
			height: {
				type: String,
				default: '34%',
			},
			// 卡片标题
			title: {
				type: String,
				default: '卡片标题',
				require: true
			},
			// 卡片
			list: {
				type: Array
			}
		},
		data() {
			return {}
		},
		async onLoad() {},
		methods: {
			// 处理操作
			handle() {
				this.$emit('handle')
			},
			// 详情操作
			preview() {
				this.$emit('preview')
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/flex.scss';

	// 列表项
	.card {
		width: 100%;
		box-shadow: 0rpx 4rpx 10rpx #ccc;
		border-radius: 20rpx;
		background-color: #ffffff;
		padding: 10rpx 40rpx;
		margin-bottom: 30rpx;
		width: 80%;
		height: 30%;
		position: relative;

		&_title,
		&_body,
		&_button {
			// border: 1px solid red;
			margin: 3% 0 4% 0;
		}

		&_title {
			font-size: 1.2rem;
		}

		&_body {
			background-color: #F5F5F5;
			padding: 1% 6%;
			border-radius: 20rpx;

			&_row {
				margin: 3% 0;

				&_label {
					text-align: justify;
					text-align-last: justify;
					color: #999999;
				}
			}
		}

		// 角标
		&_hornicon {
			position: absolute;
			top: 0;
			right: 0;
			width: 5rem;
			height: 2rem;
			background-color: blue;
			background: linear-gradient(to right, #fecac0, #fe9485, #fe7f65, #fe6a5c, #d14a3d);
			border-top-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			@extend .algin_justity_center;
			font-size: 16rpx;
			color: #fff;
		}


	}
</style>